<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="js/divrun.js"></script>
    <link
      href="bootstrap/css/bootstrap.min.css"
      rel="stylesheet"
      crossorigin="anonymous"
    />
    <script
      src="bootstrap/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="bootstrap/cover.css" />
    <link rel="stylesheet" href="animate.css/animate.min.css" />
    <link rel="stylesheet" href="css/menu.css" />
    <script src="layui/layui.js"></script>
    <title>在线工具|登陆</title>
  </head>
  <body
    background="img/System_icon/loginwall.png"
    style="
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-attachment: fixed;
      align-items: center;
    "
  >
    <center>
      <img
        src="img/System_icon/loginicon.png"
        id="loginicon"
        width="300px"
        height="300px"
        style="border-radius: 300px; margin-top: 150px"
      />
      <div
        style="vertical-align: middle; text-align: center; display: table"
      >
        <div id="login">
          <h1>Login</h1>
          <div>
            <input
              type="text"
              required
              placeholder="用户名"
              value="Alan"
            /><input
              type="password"
              required
              placeholder="密码"
              value="root"
            /><button class="but" onclick="runout()">登录</button>
            <div></div>
          </div>
        </div>
      </div>
    </center>
    <script>
      function runout() {
        (document.getElementById("loginicon").className =
          "animate__animated animate__bounce animate__slow"),
          setTimeout(function () {
            window.location.href = "/desktop.html";
          }, 2000);
      }
    </script>
  </body>
  <style type="text/css">
    html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-style: sans-serif;
    }
    body {
      width: 100%;
      height: 100%;
      font-family: "Open Sans", sans-serif;
      margin: 0;
      background-color: #4a374a;
    }
    #login {
      width: 300px;
      height: 300px;
    }
    #login h1 {
      color: #fff;
      text-shadow: 0 0 10px;
      letter-spacing: 1px;
      text-align: center;
    }
    h1 {
      font-size: 2em;
      margin: 0.67em 0;
    }
    input {
      width: 278px;
      height: 30px;
      margin-bottom: 10px;
      outline: 0;
      padding: 10px;
      font-size: 13px;
      color: #fff;
      text-shadow: 1px 1px 1px;
      border-top: 1px solid #312e3d;
      border-left: 1px solid #312e3d;
      border-right: 1px solid #312e3d;
      border-bottom: 1px solid #56536a;
      border-radius: 4px;
      background-color: #2d2d3f;
    }
    .but {
      width: 150px;
      min-height: 20px;
      opacity: 0.7;
      background-color: #fff;
      border: 1px solid #3762bc;
      color: #000;
      padding: 9px 14px;
      font-size: 15px;
      line-height: normal;
      border-radius: 5px;
      margin: 0;
    }
  </style>
</html>
